<template>
  <div class="layout">
    <div>
      <div class="menu">
        <ul>
          <li v-for="v in cuisine" :key="v.id" @click="curChoose(v.id)">
            <router-link :to="{ path: '/Order', query: { id: v.id } }">{{
              v.name
            }}</router-link>
            <span v-show="v.count > 0">{{ v.count }}</span>
          </li>
        </ul>
      </div>
      <div class="main">
        <p>菜品</p>
        <ul>
          <li v-for="(v, i) in lists" :key="i">
            <img :src="v.img" width="100" height="100" />
            <div class="info">
              <label>{{ v.name }}</label>
              <label>月售{{ v.volume }} | 好评度{{ v.comment }}</label>
              <label>
                <b>￥{{ v.price }}</b>
                <div class="choose">
                  <a @click="del(v)" v-show="v.count > 0">-</a>
                  <span v-show="v.count > 0">{{ v.count }}</span>
                  <a @click="add(v)">+</a>
                </div>
              </label>
            </div>
          </li>
        </ul>
      </div>
      <div class="total">共{{ totalNum }}份，￥{{ totalPrice }}</div>
    </div>
  </div>
</template>

<script>
import axios from "@/api/index.js";

export default {
  name: "Order",
  data() {
    return {
      curName: "菜品", //当前菜品
      cuisine: [], //菜系
      lists: [], //具体菜品
      cur: 1,
    };
  },
  mounted() {
    this.getCuisine(); //获取所有菜系
    this.cur = this.$route.query.id || this.cur;
    this.curChoose(this.cur);
  },
  methods: {
    getCuisine() {
      //获取所有菜系
      axios
        .get("/cuisine")
        .then((res) => {
          console.log(res);
          this.cuisine = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    curChoose(id) {
      axios
        .get("/cuisine/" + id)
        .then((res) => {
          console.log(res);
          this.lists = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    add(v) {
      v.count += 1;
      axios({
        method: "put",
        url: "/cuisine/increment",
        data: { id: v.id, pid: v.pid, type: 1 },
      })
        .then((res) => {
          this.getCuisine(); //获取所有菜系
        })
        .catch((err) => {
          console.log(err);
        });
    },
    del(v) {
      if (v.count <= 0) return;
      v.count -= 1;
      axios({
        method: "put",
        url: "/cuisine/increment",
        data: { id: v.id, pid: v.pid, type: 2 },
      })
        .then((res) => {
          this.getCuisine();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    totalNum() {
      return this.cuisine.reduce((total, cur) => {
        return total + cur.count;
      }, 0);
    },
    totalPrice() {
      let result = 0;
      for (var i = 0; i < this.cuisine.length; i++) {
        result += this.cuisine[i].price;
      }
      return result;
    },
  },
};
</script>

<style scoped>
@import "../assets/css/order.css";
.active {
  background: #f60;
}
</style>